<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :inline="true"
    />
    <div class="contentBattery">
      Package Statistics：
      <div class="div" style="margin-left:40px">
        Package Income：<span class="divspan">{{
          "$" + totalList.sumMoney || "$0.00"
        }}</span>
      </div>
    </div>
    <r-table
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      :isSelection="false"
      @refresh="page()"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        orderNo: "",
        phone: "",
        ctime: "",
        validityTime: "",
        status: null
        // divideState: null,
      },
      searchForm: [
        {
          type: "input",
          placeholder: "Order Nnumber",
          prop: "orderNo",
          width: 240
        },
        { type: "input", placeholder: "Phone", prop: "phone", width: 180 },
        {
          type: "select",
          placeholder: "Package Payment Status",
          prop: "status",
          width: 300,
          options: [
            {
              label: "Wait Payment",
              value: 0
            },
            {
              label: "Already Payment",
              value: 1
            }
          ]
        },
        // {
        //   type: "select", placeholder: "套餐分成", prop: "divideState", width: 150, options: [
        //     {
        //       label: "尚未分成",
        //       value: 0,
        //     },
        //     {
        //       label: "已分成",
        //       value: 1,
        //     },
        //   ],
        // },
        {
          type: "date",
          placeholder: "Start Time",
          prop: "ctime",
          width: 220,
          change: val => {
            this.searchData.ctime = val;
          }
        },
        {
          type: "date",
          placeholder: "End Time",
          prop: "validityTime",
          width: 230,
          change: val => {
            this.searchData.validityTime = val;
          }
        }
      ],
      searchHandle: [
        {
          type: "primary",
          label: "Search",
          plain: true,
          handle: e => {
            this.zeroFn();
            this.getData();
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              orderNo: "",
              phone: "",
              ctime: "",
              validityTime: "",
              status: null
            };
            this.zeroFn();
            this.getData();
          }
        }
      ],
      tableLoading: false,
      tableData: [],
      tableCols: [
        { label: "Order Nnumber", prop: "orderNo" },
        { label: "User Name", prop: "userName" },
        { label: "Phone", prop: "phone" },
        { label: "Package Name", prop: "mealName" },
        {
          label: "Package Price",
          prop: "price",
          formatter: e => (e.price ? "$" + e.price : "--")
        },
        {
          label: "Package Days",
          prop: "mealDays",
          formatter: e => (e.mealDays ? e.mealDays + "day" : "--")
        },
        {
          label: "Number of Battery Swaps",
          prop: "num",
          formatter: e => (e.num === -1 ? "Unlimited" : e.num ? e.num : "--")
        },
        {
          label: "Coupon Deduction",
          prop: "couponMoney",
          formatter: e => (e.couponMoney ? "$" + e.couponMoney : "--")
        },
        {
          label: "Balance Deduction",
          prop: "balanceMoney",
          formatter: e => (e.balanceMoney ? "$" + e.balanceMoney : "--")
        },
        {
          label: "Cash Payment",
          prop: "cashMoney",
          formatter: e => (e.cashMoney ? "$" + e.cashMoney : "--")
        },
        {
          label: "Amount Paid",
          prop: "actuallyMoney",
          formatter: e => (e.actuallyMoney ? "$" + e.actuallyMoney : "--")
        },

        {
          label: "Package Payment Status",
          prop: "status",
          itemClass: e => (e.status == 0 ? "danger" : ""),
          formatter: e =>
            e.status == 0
              ? "Wait Payment"
              : e.status == 1
              ? "Already Payment"
              : "--"
        },
        // {
        //   label: "Residue天数",
        //   prop: "actuallyMoney",
        //   formatter: e => (e.actuallyMoney ? e.actuallyMoney + "天" : "--")
        // },
        // {
        //   label: "套餐分成", prop: "divideState",
        //   itemClass: e => (e.divideState == 0 ? 'danger' : ''),
        //   formatter: e => (e.divideState == 0 ? '尚未分成' : e.divideState == 1 ? '已分成' : '--')
        // },
        { label: "Payment Time", prop: "payTime" },
        {
          label: "Valid Duration",
          prop: "validityDays",
          formatter: e => (e.validityDays ? e.validityDays + "天" : "--")
        },
        { label: "Package Expiry Date", prop: "validityTime" }
      ],
      tableHandles: [
        {
          label: "Package Orders Export",
          type: "primary",
          icon: "el-icon-download",
          // titles:
          //   "可以根据Order Nnumber、Phone、套餐PaymentStatus、Start Time、End Time筛选出订单再Export，也可以不选，直接ExportWhole订单",
          plain: true,
          loading: false,
          handle: async e => {
            const res = await this.apis.mealOrderExport(this.searchData);
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.code == 200 ? "success" : "error"
            });
            location.href = process.env.VUE_APP_URL + res.msg;
          }
        }
      ],
      pagination: { limit: 10, offset: 1, total: 0 },
      totalList: {}
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    zeroFn() {
      this.pagination.limit = 10;
      this.pagination.offset = 1;
      this.pagination.total = 0;
    },
    async getData() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.pagination.offset,
          pageSize: this.pagination.limit
        }
      };
      var res = await this.apis.mealOrderList(parm);
      this.tableData = res.rows || [];
      this.totalList = res.params || {};
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss">
.contentBattery {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 15px;
  width: 900px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  left: 0px;
  top: 0;
}

.div {
  width: 230px;
}

.divspan {
  margin-right: 5px;
  color: #000cff;
}
</style>
